<template>
    <div class="login-box">
        <div class="title">新蜂优选</div>
        <div class="line">
            <input type="text" v-model="objLogin.phone" placeholder="请输入手机号">
        </div>
        <div class="line">
            <input type="text" v-model="objLogin.code" placeholder="请输入验证码">
            <span @click="getCode">{{ codeText }}</span>
        </div>
        <div class="line-check">
            <van-checkbox v-model="remember" checked-color="#ee0a24">记住手机号？</van-checkbox>
        </div>
        <div class="line-check">
            <van-checkbox v-model="noLogin" checked-color="#ee0a24">免登录</van-checkbox>
        </div>
        <van-button 
        :disabled="canLogin"
        @click="loginEvt"
        color="linear-gradient(to right, #ff6034, #ee0a24)">
            登&nbsp;&nbsp;&nbsp;&nbsp;录
        </van-button>
        <div class="line-check">
            <van-checkbox v-model="agree" checked-color="#ee0a24">
                同意新蜂优选的使用协议
            </van-checkbox>
        </div>
        <div class="reg" @click="router.push('/register')">注册？</div>
    </div>
</template>


<script setup>
import {computed, onMounted, reactive,ref} from 'vue'
import { useRouter } from 'vue-router'
import { showFailToast,showSuccessToast } from 'vant'
import { userCode, userLogin } from '../../apis/loginApi'
import { useStore} from 'vuex'


let router = useRouter()
let store = useStore()

let objLogin = reactive({
            phone:'',
            code:''
})

let codeText = ref('获取验证码')
let noLogin = ref(false)       // 免登录数据
let remember = ref(false)      //记住手机号
let agree = ref(false)         //同意协议


onMounted(()=>{
    let cache = localStorage.getItem('phone')
    if(cache){
        remember.value = true
        objLogin.phone = cache
    }
})

let canLogin = computed(function(){
    return !(agree.value && /^[0-9]{4}$/.test(objLogin.code)&&/^1[3-9]{1}[0-9]{9}$/.test(objLogin.phone))
})

async function getCode(){
    if(codeText.value !== '获取验证码') return

    let phoneRule = /^1[3-9]{1}[0-9]{9}$/.test(objLogin.phone)
    // console.log(phoneRule);
    if(!phoneRule){
        showFailToast('请输入正确的手机号')
        return 
    }

    codeText.value = '获取中...'
    let {data} = await userCode(objLogin.phone)
    console.log(data);
    if(data.code === 200){
        showSuccessToast('验证码为'+ data.codeNum)
        let nowTime = Date.now()
        let timer = setInterval(function(){
            let  afterTime = Math.ceil((Date.now() -nowTime) / 1000)
            codeText.value = `${60-afterTime}s后再获取`
            if(afterTime >= 60){
                clearInterval(timer)
                codeText.value = '获取验证码'
            }
        },1000/60)
    }else{
        showFailToast('验证码获取失败')
        codeText.value = '获取验证码'
    }

}


//登录
async function loginEvt(){
    let {data} = await userLogin(objLogin)
    // console.log(data);
    if(data.code !== 200){
        showFailToast('登录失败，请重新登录')
        return
    }

    if(remember.value){
        localStorage.setItem('phone',objLogin.phone)
    }else{
        localStorage.removeItem('phone')
    }
    
    store.commit('loginModule/changeUserInfo',data.date)
    store.commit('cartModule/accessCart',data.date.cart)
    store.commit('loginModule/accessAddressList',data.date.addressList)
    store.commit('meModule/changeMoney',data.date.money)
    // console.log(data.date);
    router.push('/')



}
</script>




<style lang="less" scoped>

@import '../../style/common.less';

.login-box {
    display: block;
    position: relative;
    height: 100vh;
    overflow: hidden;
    padding: 20vh 20px 0;
    &::after{
        content: "";
            background: url(../../images/loginBg.png), 100% no-repeat;
            opacity: 0.3;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
    }

    .title {
        color: #d4380d;
        text-align: center;
        font-size: 1.6rem;
        margin-bottom: 30px;

        &::before {
            content: '';
            display: inline-block;
            vertical-align: text-bottom;
            margin-right: 3px;
            width: 32px;
            height: 32px;
            border-radius: 4px;
            margin-right: 12px;
            background: url(../../images/logo.jpg) center center / 50px 50px no-repeat;
        }
    }

    .line {
        display: flex;
        margin: 12px 0;
        padding: 10px 0;
        border-bottom: 1px solid #999;

        input {
            flex: 1;
            width: 0;
            border: none;   //无边框
            outline: none;      
            background: transparent;
            font-size: 1rem;
            color: #d4380d;
            text-indent: 16px;

            &::-webkit-input-placeholder {
                font-size: .8rem;
                color: #999;
            }
        }

        >span {
            flex: 0 0 110px;
            width: 0;
            color: #d4380d;
            font-size: .8rem;
            text-align: center;
            line-height: 25px;
            border-left: 1px solid #999;
        }
    }

    .line-check {
        margin: 20px 0;
        font-size: .8rem;
        color: #d4380d;
    }

    .reg {
        margin-top: 10px;
        text-align: right;
        font-size: 1rem;
        color: #d4380d;

    }

    .van-button {
        width: 100%;
        font-size: 1rem;
        border-radius: 10px;
    }
}
</style>